<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0px;padding: 0px;}
    li{list-style: none;}
    .wrap{width: 1000px;margin: 0 auto;}
    .sbox{width:198px;height:250px;border:1px solid #ededed;float: left;position: relative;}
    .sbox .pic{height: 165px;border-bottom: 1px solid #f8f8f8;}
    .sbox img{height: 165px;}
    .sbox .info{padding:14px 0 0 18px;height:57px;width: 180px;font-size: 12px;color:#686868;} 
    /* .sbox a{display: block;text-decoration: none;font-size: 12px;color:#686868;} */
    .sbox-box{display:none; width:200px;height:250px;background:#525252;position: absolute;top: 0;bottom: 0;opacity:0;}
    
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <!-- <li class="sbox">
            <a href="">
            <div class="pic"><img src="img/京东/京东效果_02.jpg"/></div>
            <div class="info">乔山 家用跑步机<h3 style="color:#e3393c;font-weight:400;">￥8499.00</h3></div>
            <div class="sbox-box"></div>
            </a>
            </li> -->
        </ul>
    </div>
    <script>
    var ul=document.getElementsByTagName("ul")[0]
    var html=""
    var xhr=new XMLHttpRequest()
    xhr.open("get","http://192.168.52.233/study/php/goodsList.php")
    xhr.send()
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            var arr=JSON.parse(xhr.responseText)
            console.log(arr)

            arr.forEach(item => {
                var {goods_pic,goods_title,goods_current_price,goods_id}=item    
                html+=`<li class="sbox">
                <div class="pic"><img src="http:${goods_pic}"/></div>
                <div class="info">${goods_title}<h3 style="color:#e3393c;font-weight:400;">￥${goods_current_price}<button class="buy" productId="${goods_id}">购买</button></h3></div>
                <div class="sbox-box"></div>
                </li>`
            });

            ul.innerHTML=html
            // var a=document.getElementsByClassName("a")
            // console.log(a)
            // for(var i=0;i<a.length;i++){
            //     a[i].onclick=function(e){
            //         e.preventDefault();
            //         e.stopPropagation();
            //     }
            // }
            var buyList=document.getElementsByClassName("buy")
            console.log(buyList)
            for (let i = 0; i < buyList.length; i++) {
                    console.log(buyList[i])
                    buyList[i].onclick = function(){
                            console.log(i);
                    }
            }

        }
    }

    </script>
</body>
</html>